@charset "utf-8";
@import "iconfonts.css";
.keyboard-ansic {
  width: 942px;
  height: 367px;
  background: #bec1c8;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  /*方向键*/
  /*没有按键的键盘 */
  /*原料键盘   */
  /*选中状态*/
  /*空键盘*/
}
.keyboard-ansic li,
.keyboard-ansic ol {
  float: left;
  height: 56px;
  width: 56px;
  margin-bottom: 8px;
  margin-right: 8px;
  background: #9e9e9e;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
  border-top: none;
  border-radius: 5px;
}
.keyboard-ansic li > div {
  position: absolute;
  display: flex;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background: #eff0f2;
  border-top: 1px solid #f5f5f5;
  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
  cursor: pointer;
  justify-content: space-between;
  flex-direction: column;
  z-index: 2;
}
.keyboard-ansic span {
  display: block;
  text-align: center;
  height: 28px;
  line-height: 28px;
  flex: 0.5;
  font-size: 14px;
  color: #a5a6aa ;
  user-select: none;
}
.keyboard-ansic .first-line {
  height: 25px;
}
.keyboard-ansic .first-line > div {
  height: 25px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-direction: row;
}
.keyboard-ansic .first-line span {
  flex: 0.5;
  height: 25px;
  line-height: 25px;
}
.keyboard-ansic li:active div,
.keyboard-ansic li.active div {
  box-shadow: inset 0 0 10px #ccc, 0 0 3px #333;
  border-top: 1px solid #eee;
  background-color: #ffd52f;
}
.keyboard-ansic li:active div > span,
.keyboard-ansic li.active div > span {
  color: rgba(0, 0, 0, 0.87);
}
.keyboard-ansic .clear-margin {
  margin-right: 0;
}
.keyboard-ansic .esc,
.keyboard-ansic .esc div {
  width: 90px;
}
.keyboard-ansic .enter,
.keyboard-ansic .enter div {
  width: 105px;
}
.keyboard-ansic .shift,
.keyboard-ansic .shift div {
  width: 137px;
}
.keyboard-ansic .command,
.keyboard-ansic .command div {
  width: 72px;
}
.keyboard-ansic .space,
.keyboard-ansic .space div {
  width: 314px;
}
.keyboard-ansic .arrow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #bec1c8;
  box-shadow: none;
  border: none;
}
.keyboard-ansic .arrow li {
  height: 25px;
  margin: 0;
}
.keyboard-ansic .arrow div {
  display: flex;
  justify-content: space-between;
  height: 25px;
  flex-direction: row;
}
.keyboard-ansic .arrow .icon {
  padding-top: 5px;
}
.keyboard-ansic .arrow span {
  height: 25px;
  flex: 0.5;
}
.keyboard-ansic .start {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: up 1s linear forwards;
  animation-delay: 1s;
}
.keyboard-ansic .back {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: down 2s linear forwards;
}
@keyframes up {
  0% {
    top: 188px;
  }
  100% {
    top: -230px;
    visibility: hidden;
  }
}
@keyframes down {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.keyboard-ansic .chosen {
  box-shadow: 2px 2px 4px #3d8cfd, -2px -2px 4px #3d8cfd, 2px -2px 4px #3d8cfd, -2px 2px 4px #3d8cfd;
}
.keyboard-ansic .empty {
  opacity: 0;
}
.keyboard-iso {
  width: 942px;
  height: 367px;
  background: #bec1c8;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  /*方向键*/
  /*没有按键的键盘 */
  /*原料键盘   */
  /*选中状态*/
  /*空键盘*/
}
.keyboard-iso li,
.keyboard-iso ol {
  float: left;
  height: 56px;
  width: 56px;
  margin-bottom: 8px;
  margin-right: 8px;
  background: #9e9e9e;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
  border-top: none;
  border-radius: 5px;
}
.keyboard-iso li > div {
  display: flex;
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background: #eff0f2;
  border-top: 1px solid #f5f5f5;
  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
  cursor: pointer;
  transition: 1s;
  justify-content: space-between;
  flex-direction: column;
  z-index: 2;
}
.keyboard-iso span {
  display: block;
  text-align: center;
  height: 28px;
  line-height: 28px;
  flex: 0.5;
  font-size: 14px;
  color: #a5a6aa ;
  user-select: none;
}
.keyboard-iso .first-line {
  height: 25px;
}
.keyboard-iso .first-line > div {
  height: 25px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-direction: row;
}
.keyboard-iso .first-line span {
  flex: 0.5;
  height: 25px;
  line-height: 25px;
}
.keyboard-iso .arrow-key li span.icon {
  padding-top: 6px;
}
.keyboard-iso li:active div,
.keyboard-iso li.active div {
  box-shadow: inset 0 0 10px #ccc, 0 0 3px #333;
  border-top: 1px solid #eee;
  background-color: #ffd52f;
}
.keyboard-iso li:active div > span,
.keyboard-iso li.active div > span {
  color: rgba(0, 0, 0, 0.87);
}
.keyboard-iso .clear-margin {
  margin-right: 0;
}
.keyboard-iso .esc,
.keyboard-iso .esc div {
  width: 90px;
}
.keyboard-iso .enter,
.keyboard-iso .enter div {
  width: 106px;
}
.keyboard-iso .shift1,
.keyboard-iso .shift1 div {
  width: 75px;
}
.keyboard-iso .shift2,
.keyboard-iso .shift2 div {
  width: 135px;
}
.keyboard-iso .command,
.keyboard-iso .command div {
  width: 72px;
}
.keyboard-iso .space,
.keyboard-iso .space div {
  width: 314px;
}
.keyboard-iso .return {
  width: 56px;
}
.keyboard-iso .return:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 107px;
  height: 120px;
  background: #9e9e9e;
  width: 40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
  border-top: none;
  border-radius: 0 5px 5px 5px;
  z-index: 1;
}
.keyboard-iso .return:before {
  content: '';
  position: absolute;
  right: 45px;
  width: 10px;
  height: 52px;
  top: 111px;
  background: #9e9e9e;
  z-index: 2;
}
.keyboard-iso .return div {
  height: 120px;
  width: 56px;
  background: transparent;
  box-shadow: none;
  border: none;
  display: block;
  z-index: 100;
}
.keyboard-iso .return span {
  background: #ededef;
}
.keyboard-iso .return div:after {
  content: '';
  position: absolute;
  width: 40px;
  top: 50px;
  left: 16px;
  height: 14px;
  background: #ededef;
}
.keyboard-iso .return span:nth-of-type(1) {
  box-shadow: 0 0 3px #333;
  border-radius: 5px 5px 0 5px;
  height: 56px;
  border-top: 1px solid #f5f5f5;
}
.keyboard-iso .return span:nth-of-type(2) {
  border-radius: 0 0 5px 5px;
  height: 64px;
  margin-left: 16px;
  box-shadow: 0 2px 0 #c3c3c3, 0 2px 3px #1d1c1c, 0 -2px 3px #ededef;
}
.keyboard-iso .arrow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #bec1c8;
  box-shadow: none;
  border: none;
}
.keyboard-iso .arrow li {
  height: 25px;
  margin: 0;
}
.keyboard-iso .arrow div {
  display: flex;
  justify-content: space-between;
  height: 25px;
  flex-direction: row;
}
.keyboard-iso .arrow .icon {
  padding-top: 5px;
}
.keyboard-iso .arrow span {
  height: 25px;
  flex: 0.5;
}
.keyboard-iso .start {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: up 1s linear forwards;
  animation-delay: 1s;
}
.keyboard-iso .back {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: down 2s linear forwards;
}
@keyframes up {
  0% {
    top: 188px;
  }
  100% {
    top: -230px;
    visibility: hidden;
  }
}
@keyframes down {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.keyboard-iso .chosen {
  box-shadow: 2px 2px 4px #3d8cfd, -2px -2px 4px #3d8cfd, 2px -2px 4px #3d8cfd, -2px 2px 4px #3d8cfd;
}
.keyboard-iso .empty {
  opacity: 0;
}
.keyboard-jis {
  position: relative;
  width: 942px;
  height: 367px;
  background: #bec1c8;
  border-radius: 10px;
  padding: 10px;
  /*方向键*/
  /*没有按键的键盘 */
  /*原料键盘   */
  /*选中状态*/
  /*空键盘*/
}
.keyboard-jis li,
.keyboard-jis ol {
  float: left;
  height: 56px;
  width: 56px;
  margin-bottom: 8px;
  margin-right: 8px;
  background: #9e9e9e;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
  border-top: none;
  border-radius: 5px;
}
.keyboard-jis li > div {
  display: flex;
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background: #eff0f2;
  border-top: 1px solid #f5f5f5;
  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
  cursor: pointer;
  transition: 1s;
  justify-content: space-between;
  flex-direction: column;
  z-index: 2;
}
.keyboard-jis span {
  display: block;
  text-align: center;
  height: 28px;
  line-height: 28px;
  flex: 0.5;
  font-size: 14px;
  color: #a5a6aa ;
  user-select: none;
}
.keyboard-jis .first-line {
  height: 25px;
}
.keyboard-jis .first-line > div {
  height: 25px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-direction: row;
}
.keyboard-jis .first-line span {
  flex: 0.5;
  height: 25px;
  line-height: 25px;
}
.keyboard-jis .arrow-key li span.icon {
  padding-top: 6px;
}
.keyboard-jis li:active div,
.keyboard-jis li.active div {
  box-shadow: inset 0 0 10px #ccc, 0 0 3px #333;
  border-top: 1px solid #eee;
  background-color: #ffd52f;
}
.keyboard-jis li:active div > span,
.keyboard-jis li.active div > span {
  color: rgba(0, 0, 0, 0.87);
}
.keyboard-jis .clear-margin {
  margin-right: 0;
}
.keyboard-jis .esc,
.keyboard-jis .esc div {
  width: 90px;
}
.keyboard-jis .enter,
.keyboard-jis .enter div {
  width: 73px;
}
.keyboard-jis .shift,
.keyboard-jis .shift div {
  width: 105px;
}
.keyboard-jis .command,
.keyboard-jis .command div {
  width: 72px;
}
.keyboard-jis .space,
.keyboard-jis .space div {
  width: 218px;
}
.keyboard-jis .return {
  width: 90px;
}
.keyboard-jis .return:before {
  content: '';
  position: absolute;
  right: 10px;
  top: 107px;
  height: 120px;
  background: #9e9e9e;
  width: 74px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
  border-top: none;
  border-radius: 0 5px 5px 5px;
  z-index: 1;
}
.keyboard-jis .return:after {
  content: '';
  position: absolute;
  right: 79px;
  width: 10px;
  height: 52px;
  top: 111px;
  background: #9e9e9e;
  z-index: 2;
}
.keyboard-jis .return div {
  height: 120px;
  width: 90px;
  background: transparent;
  box-shadow: none;
  border: none;
  z-index: 100;
}
.keyboard-jis .return span {
  background: #ededef;
}
.keyboard-jis .return div:after {
  content: '';
  position: absolute;
  width: 74px;
  top: 50px;
  left: 16px;
  height: 14px;
  background: #ededef;
}
.keyboard-jis .return span:nth-of-type(1) {
  box-shadow: 0 0 3px #333;
  border-radius: 5px 5px 0 5px;
  height: 56px;
  border-top: 1px solid #f5f5f5;
}
.keyboard-jis .return span:nth-of-type(2) {
  border-radius: 0 0 5px 5px;
  height: 64px;
  margin-left: 16px;
  box-shadow: 0 2px 0 #c3c3c3, 0 2px 3px #1d1c1c, 0 -2px 3px #ededef;
}
.keyboard-jis .cov {
  content: '';
  position: absolute;
  height: 64px;
  width: 16px;
  left: 0;
  top: 56px;
  background: #bec1c8;
  border-radius: 0 5px 0 0;
  box-shadow: -2px 0 1px #bec1c8, 0 3px 1px #bec1c8, 0 1px 0 #c3c3c3;
  border-top: 1px solid #ececed;
}
.keyboard-jis .arrow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #bec1c8;
  box-shadow: none;
  border: none;
}
.keyboard-jis .arrow li {
  height: 25px;
  margin: 0;
}
.keyboard-jis .arrow div {
  display: flex;
  justify-content: space-between;
  height: 25px;
  flex-direction: row;
}
.keyboard-jis .arrow .icon {
  padding-top: 5px;
}
.keyboard-jis .arrow span {
  height: 25px;
  flex: 0.5;
}
.keyboard-jis .start {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: up 1s linear forwards;
  animation-delay: 1s;
}
.keyboard-jis .back {
  left: 461px !important;
  top: 188px !important;
  transform: translateX(-50%) translateY(-50%) scale(2);
  z-index: 100;
  animation: down 2s linear forwards;
}
@keyframes up {
  0% {
    top: 188px;
  }
  100% {
    top: -230px;
    visibility: hidden;
  }
}
@keyframes down {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.keyboard-jis .chosen {
  box-shadow: 2px 2px 4px #3d8cfd, -2px -2px 4px #3d8cfd, 2px -2px 4px #3d8cfd, -2px 2px 4px #3d8cfd;
}
.keyboard-jis .empty {
  opacity: 0;
}
/*variable 变量*/
/*reset style*/
html {
  font-size: 16px;
}
html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #a9ecb1;
  color: rgba(0, 0, 0, 0.87);
  overflow: hidden;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea,
ul,
ol,
dl,
li,
dt,
dd,
table,
tr,
th,
td,
article,
section,
header,
aside,
nav,
footer,
div,
p,
a,
span,
em,
i,
strong,
label {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: helvetica, "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: .875rem;
}
ul,
ol,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.87);
}
a:hover {
  color: #1774ff;
}
button,
input,
select,
textarea,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
input[type="text"] {
  height: 2rem;
  line-height: 2rem;
  padding: 0 .5rem;
}
/*global*/
.table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.table caption {
  height: 2rem;
  line-height: 2rem;
  font-size: .9375rem;
  text-align: left;
}
.table tr {
  height: 2rem;
}
.table th {
  font-weight: normal;
}
.table th,
.table td {
  text-align: center;
  border: 1px solid #5a5a5a;
}
.border {
  border: 1px solid #5a5a5a;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}
::-webkit-scrollbar-thumb {
  background-color: #deffe2;
  box-shadow: 0 0 0 1px #adeab4 inset;
}
::-webkit-scrollbar-track {
  background-color: #adeab4;
}
::-webkit-scrollbar-button {
  width: .5rem;
  height: .5rem;
  background-color: #adeab4;
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-image: url("../images/arrow.png");
}
::-webkit-scrollbar-button:horizontal:start {
  background-position: 0 0;
}
::-webkit-scrollbar-button:horizontal:end {
  background-position: -0.5rem 0;
}
::-webkit-scrollbar-button:vertical:start {
  background-position: -15px 0;
}
::-webkit-scrollbar-button:vertical:end {
  background-position: -23px 0;
}
/*page style 页面框架*/
article {
  position: relative;
  width: 1440px;
  height: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
article > header {
  height: 2.5rem;
  background-color: #3d404c;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.87);
}
article > header h1 {
  margin-left: 2rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 1.25rem;
  font-weight: normal;
}
article > section {
  position: relative;
  flex: 1;
  display: flex;
}
/*头部功能按钮组*/
.btn-group {
  display: flex;
  align-items: center;
}
.btn-group > .btn {
  position: relative;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1rem;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.btn-group > .btn:before {
  position: absolute;
  top: .5rem;
  left: 0;
  bottom: .5rem;
  content: '';
  box-sizing: border-box;
  border-left: 1px solid #e0e0e0;
}
.btn-group > .btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.btn-group > .btn:active {
  background-color: #3d404c;
}
.btn-group > .btn.btn-drop-down {
  position: relative;
  padding-right: 2.5rem;
}
.btn-group > .btn.btn-drop-down:after {
  position: absolute;
  top: 50%;
  right: .75rem;
  margin-top: -0.5rem;
  content: "\e900";
  height: 1rem;
  width: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 1rem;
  font-family: "icomoon";
  transition: all .2s;
}
.btn-group > .btn.btn-drop-down > span {
  font-size: 18px;
}
.btn-group > .btn.btn-drop-down > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  display: none;
  min-width: 100%;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.54);
}
.btn-group > .btn.btn-drop-down > ul > li {
  height: 1.75rem;
  line-height: 1.75rem;
  min-width: 100%;
  padding: 0 1rem;
  text-align: left;
  font-size: 18px;
  white-space: nowrap;
  border-bottom: 1px solid #e0e0e0;
  transition: all .2s;
}
.btn-group > .btn.btn-drop-down > ul > li:last-child {
  border-bottom: none;
}
.btn-group > .btn.btn-drop-down > ul > li:hover,
.btn-group > .btn.btn-drop-down > ul > li.active {
  background-color: #1d2a3a;
  color: rgba(255, 255, 255, 0.87);
}
.btn-group > .btn.btn-drop-down.on:after {
  transform: rotate(-180deg);
}
.btn-group > .btn.btn-drop-down.on > ul {
  display: block;
}
.btn-group > .btn-connect.active {
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
}
.btn-group > .btn-connect.active:before {
  display: none;
}
.btn-group > .btn-cross.active {
  background-color: #ff8a00;
  color: rgba(255, 255, 255, 0.87);
}
.btn-group > .btn-cross.active:before {
  display: none;
}
/*左边tray盘*/
.aside {
  display: flex;
  width: 25rem;
  height: 100%;
  background-color: #b6f7be;
  padding: 1rem;
}
.aside > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.aside > div:first-child {
  margin-right: 1rem;
}
.aside ul {
  height: 16.25rem;
  width: 11rem;
}
.aside ul li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.875rem;
  line-height: 0.875rem;
  padding: 0 .25rem;
  border: 1px solid #5a5a5a;
  cursor: pointer;
}
.aside ul li + li {
  margin-top: -1px;
}
.aside ul li.active,
.aside ul li:active {
  border: 1px solid #ff8a00;
  z-index: 1;
}
.aside ul li > * + * {
  margin-left: .25rem;
}
.aside ul li span {
  display: block;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: .6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aside ul li span.language {
  width: 36px;
}
.aside ul li span.color {
  width: 44px;
  text-align: center;
}
.aside ul li span.remain-number {
  width: 22px;
  text-align: right;
}
.aside .progress {
  position: relative;
  flex: 1;
  background-color: #7c8688;
  height: 4px;
  border-radius: 2px;
  border: none;
  overflow-x: hidden;
  padding: 1px 0;
  background-clip: content-box;
}
.aside .progress .value {
  position: absolute;
  color: #1774ff;
  background: currentcolor;
  height: 2px;
  border-radius: 1px;
  -webkit-transition: 1s;
  transition: 1s;
}
.aside .progress .value:after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
  top: -1px;
  right: 0;
}
.aside .progress-warning .value {
  color: #ff6868 !important;
}
/*右边数据*/
.main {
  flex: 1;
  width: 65rem;
  height: 100%;
  padding: 1rem;
}
.main > div h2 {
  font-weight: normal;
  font-size: 1rem;
}
/*图表区*/
.chart-container {
  display: flex;
  height: 11rem;
  background-color: #b6f7be;
  padding: 1rem;
  margin-bottom: 1rem;
  /*键盘返修总数*/
  /*tray盘总数*/
}
.chart-container > div {
  height: 100%;
}
.chart-container > div + div {
  margin-left: .5rem;
}
.chart-container .keyboard-repair-total,
.chart-container .tray-total,
.chart-container .period {
  width: 8rem;
}
.chart-container .language,
.chart-container .tray-remain,
.chart-container .keycap-remain {
  width: 11.5rem;
}
.chart-container .chart {
  height: 8rem;
}
.chart-container h2 {
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: .875rem;
}
.chart-container .keyboard-repair-total .chart {
  color: #1774ff;
  text-align: center;
  line-height: 8rem;
  font-size: 4rem;
}
.chart-container .tray-total .chart {
  color: #ff8a00;
  text-align: center;
  line-height: 8rem;
  font-size: 4rem;
}
/*键盘区*/
.keyboard-container {
  height: 25rem;
  background-color: #b6f7be;
  padding: 0 1rem;
  margin-bottom: 1rem;
}
.keyboard-container .top {
  display: flex;
  height: 6.25rem;
  margin-bottom: .75rem;
}
.keyboard-container .bottom {
  position: relative;
  padding-right: 15rem;
  overflow: hidden;
}
.keyboard-container .keyboard-barcode .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 2rem;
}
.keyboard-container .keyboard-barcode .header > * + * {
  margin-left: 1rem;
}
.keyboard-container .keyboard-barcode .header select {
  height: 1.5rem;
  padding: 0 .25rem;
  border: 1px solid #1774ff;
  cursor: pointer;
  font-size: 13px;
  background-color: transparent;
}
.keyboard-container .keyboard-barcode .header .tabs {
  display: flex;
}
.keyboard-container .keyboard-barcode .header .tabs a {
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  padding: 0 .5rem;
  color: rgba(0, 0, 0, 0.87);
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
}
.keyboard-container .keyboard-barcode .header .tabs a + a {
  margin-left: -1px;
}
.keyboard-container .keyboard-barcode .header .tabs a.active,
.keyboard-container .keyboard-barcode .header .tabs a:active {
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
}
.keyboard-container .keyboard-barcode .header .tabs-mode a {
  background-color: #fff;
}
.keyboard-container .keyboard-barcode .header .tabs-keyboard a {
  border: 1px solid #1774ff;
}
.keyboard-container .keyboard-barcode .body {
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.125rem;
  background-color: #b8f1cb;
  border: 1px solid #1774ff;
}
.keyboard-container .keyboard-barcode .body button {
  line-height: 3rem;
  width: 6rem;
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
  text-align: center;
  border: none;
  display: none;
  font-size: 1rem;
}
.keyboard-container .keyboard-barcode .body button:hover {
  filter: alpha(opacity=80);
  opacity: .8;
}
.keyboard-container .keyboard-barcode .body button:active {
  filter: alpha(opacity=100);
  opacity: 1;
}
.keyboard-container .keyboard-barcode .body input[type="text"] {
  flex: 1;
  width: 9.875rem;
  margin: 0 .5rem;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #1774ff;
  font-size: 1rem;
}
.keyboard-container .keyboard-barcode .body input[type="text"]::placeholder {
  color: rgba(0, 0, 0, 0.54);
}
.keyboard-container .keyboard-barcode .body input[type="text"].manual {
  display: none;
}
.keyboard-container .keyboard-barcode .body.no-style {
  border: none;
  background-color: transparent;
}
.keyboard-container .lost-keycap-info {
  flex: 1;
  margin-left: 1rem;
}
.keyboard-container .lost-keycap-info h2 {
  height: 2rem;
  line-height: 2rem;
}
.keyboard-container .lost-keycap-info ul {
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.keyboard-container .lost-keycap-info ul li {
  display: inline-block;
  height: 50px;
  border: 1px solid #1774ff;
}
.keyboard-container .lost-keycap-info ul li + li {
  margin-left: 1rem;
}
.keyboard-container .lost-keycap-info ul li > div {
  float: left;
  min-width: 6rem;
  height: 3rem;
  padding: 6px;
  text-align: center;
}
.keyboard-container .lost-keycap-info ul li > div > * {
  display: block;
  font-size: .75rem;
  height: 1rem;
  line-height: 1rem;
}
.keyboard-container .lost-keycap-info ul li > div > *:first-child {
  margin-bottom: 4px;
}
.keyboard-container .lost-keycap-info ul li > div:nth-child(1) {
  background-color: #e7ffea;
}
.keyboard-container .lost-keycap-info ul li > div:nth-child(1) > span:first-child {
  display: inline-block;
  padding: 0 4px;
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.keyboard-container .lost-keycap-info ul li > div:nth-child(2) > span:first-child {
  color: #1774ff;
  font-size: 1rem;
}
.keyboard-container .lost-keycap-info ul li > div:nth-child(3) > span:first-child {
  color: #ff8a00;
  font-size: 1rem;
}
.keyboard-container .keyboard {
  transform: scale(0.75);
  transform-origin: left top;
}
.keyboard-container .keyboard-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 15rem;
}
.keyboard-container .keyboard-info li {
  position: relative;
  padding-left: 2.5rem;
  height: 2rem;
  line-height: 2rem;
}
.keyboard-container .keyboard-info li + li {
  margin-top: 1.5rem;
}
.keyboard-container .keyboard-info li span:last-child {
  margin-left: .25rem;
}
.keyboard-container .keyboard-info li .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 1.75rem;
}
.keyboard-container .keyboard-info li .icon.icon-flag {
  color: #1774ff;
}
.keyboard-container .keyboard-info li .icon.icon-ruler {
  color: #00d800;
}
.keyboard-container .keyboard-info li .icon.icon-config {
  color: #845cee;
}
.keyboard-container .keyboard-info li .icon.icon-list {
  color: #fe8b02;
}
.keyboard-container .keyboard-info li .icon.icon-color {
  color: #ff4858;
}
/*表格区*/
.table-container {
  display: flex;
  width: 100%;
  height: 14.75rem;
  /*键帽返修日志*/
  /*轴状态*/
}
.table-container > div {
  flex: 1;
  position: relative;
  height: 100%;
  padding: 2rem 1rem 0 1rem;
  background-color: #b6f7be;
}
.table-container > div + div {
  margin-left: 1rem;
}
.table-container > div > h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem;
}
.table-container .repair-log > div {
  width: 100%;
  height: 12.062rem;
  overflow-y: auto;
}
.table-container .axis-status .table td {
  width: 25%;
}
/*dialog 弹窗*/
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.54);
  display: none;
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: none;
  background-color: #fff;
}
.dialog footer {
  display: flex;
}
.dialog footer .btn {
  flex: 1;
  height: 2.5rem;
  line-height: 2.5rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.dialog footer .btn.btn-cancel {
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-top: 1px solid #e0e0e0;
}
.dialog footer .btn.btn-cancel:active {
  background-color: #e0e0e0;
}
.dialog footer .btn.btn-ok {
  background-color: #1774ff;
  border-bottom-right-radius: 4px;
  color: rgba(255, 255, 255, 0.87);
}
.dialog footer .btn.btn-ok:hover {
  background-color: #3183ff;
}
.dialog footer .btn.btn-ok:active {
  background-color: #1774ff;
}
/*tray信息弹窗*/
.dialog-tray-info {
  width: 974px;
  height: 512px;
  padding: 1rem;
  color: rgba(0, 0, 0, 0.87);
}
.dialog-tray-info > header {
  position: relative;
  height: 6rem;
  padding-right: 176px;
  margin-bottom: 1rem;
}
.dialog-tray-info > header .table td {
  width: 20%;
}
.dialog-tray-info > header button {
  position: absolute;
  top: 2rem;
  right: 0;
  height: 2rem;
  line-height: 2rem;
  width: 112px;
  text-align: center;
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
  border: none;
  cursor: pointer;
}
.dialog-tray-info > header button:hover {
  filter: alpha(opacity=80);
  opacity: .8;
}
.dialog-tray-info > header button:active {
  filter: alpha(opacity=100);
  opacity: 1;
}
.dialog-tray-info > header .icon {
  position: absolute;
  top: -4rem;
  right: -4rem;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
}
.dialog-tray-info > header .icon:hover {
  color: #ff6868;
}
/*确认弹窗*/
.dialog-confirm {
  width: 18rem;
  border-radius: 4px;
}
.dialog-confirm header {
  height: 3rem;
  border-bottom: 1px solid #e0e0e0;
}
.dialog-confirm header h3 {
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: normal;
  border-bottom: 1px solid #e0e0e0;
}
.dialog-confirm section {
  min-height: 5rem;
  padding: 2rem 1rem;
}
/*配置弹窗*/
.dialog-config {
  width: 28rem;
  border-radius: 4px;
}
.dialog-config header {
  height: 3rem;
  border-bottom: 1px solid #e0e0e0;
}
.dialog-config header h3 {
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: normal;
}
.dialog-config section {
  padding: 2rem 1rem;
}
.dialog-config section > * + * {
  margin-top: 1.5rem;
}
.dialog-config .form-item {
  display: flex;
  align-items: center;
}
.dialog-config .form-item label {
  width: 4.5rem;
}
.dialog-config .form-item input {
  flex: 1;
  border: 1px solid #ccc;
  transition: all .5s;
}
.dialog-config .form-item input:focus {
  border: 1px solid #1774ff;
}
.dialog-config .save-path {
  display: flex;
  align-items: center;
  min-height: 2rem;
}
.dialog-config .save-path span {
  width: 4.5rem;
}
.dialog-config .save-path p {
  flex: 1;
  line-height: 1rem;
  word-break: break-all;
}
/*操作提示*/
.toast {
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 5rem;
  padding: .5rem 1.5rem;
  box-shadow: 0 2px 4px 0 rgba(2, 63, 154, 0.37);
  background-color: #1774ff;
  color: rgba(255, 255, 255, 0.87);
  border-radius: 4px;
  z-index: 99;
}
